<!--  -->
<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>素材管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header_tip">
      <div>
        <el-button-group size="small">
          <el-button :type="flag" @click="isload" size="small">全部</el-button>
          <el-button :type="flag1" @click="isload" size="small">收藏</el-button>
        </el-button-group>
      </div>
      <div>
        <el-button type="success" plain size="small" @click="dialogTableVisible = true">上传图片</el-button>
        <el-dialog title="上传图片" :visible.sync="dialogTableVisible" :append-to-body="true">
          <el-upload
            class="upload-demo"
            drag
            action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
            :headers="uploadHeaders"
            name="image"
            :on-success="uploadSuccess"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
           
          </el-upload>
        </el-dialog>
      </div>
    </div>
    <div class="image_body">
      <div class="item-container body_item" v-for="(item,index) in images" :key="index">
        <img :src="item.url" alt srcset>
        <div class="tip">
          <el-button
            size="mini"
            type="warning"
            :icon="item.is_collected?'el-icon-star-on':'el-icon-star-off'"
            @click="collecting(item)"
            circle
          ></el-button>
          <el-button 
            size="mini"
            type="danger" 
            icon="el-icon-delete" 
            @click="deleteImge(item.id)"
            circle></el-button>
        </div>
      </div>
      <!-- <image-item v-for="(item,index) in images" :key="index" :item="item" class="body_item"></image-item> -->
    </div>
    <div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total_count"
        :pageSize="size"
        :current-page.sync="page"
        @current-change="onCurrentChange"
      />
    </div>
  </el-card>
</template>

<script>
import { getImages, collectImages,deleteImages } from "@/api/images";

export default {
  name: "Images",
  components: {},
  data() {
    const user = JSON.parse(window.localStorage.getItem("user"));
    return {
      flag: "primary",
      flag1: "",
      flag3: 1,
      isprimary: false,
      images: [],
      total_count: null,
      page: 1,
      size: 20,
      dialogTableVisible: false,
      uploadHeaders: {
        Authorization: `Bearer ${user.token}`
      }
    };
  },
  methods: {
    getImages() {
      getImages({
        collect: this.isprimary,
        page: this.page
      }).then(res => {
        this.images = res.data.data.results;
        this.total_count = res.data.data.total_count;
      });
    },
    isload() {
      if (this.flag3 === 1) {
        this.flag = "";
        this.flag1 = "primary";
        this.flag3 = 0;
      } else {
        this.flag = "primary";
        this.flag1 = "";
        this.flag3 = 1;
      }
      this.isprimary = !this.isprimary;
      this.getImages();
    },
    onCurrentChange(page) {
      this.getImages();
    },
    uploadSuccess() {
      this.dialogTableVisible = false;
      this.getImages();
      this.$message({
        type: "success",
        message: "上传成功"
      });
    },
    collecting(item) {
      collectImages(item.id,!item.is_collected).then(res => {
          console.log(res);
          item.is_collected=!item.is_collected
          
      });
    },
    deleteImge(id){
         this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteImages(id).then(res=>{
            console.log(res);
            this.getImages();
        })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
           
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })        
        })
        
    }
  },
  created() {
    this.getImages();
  }
};
</script>
<style scoped>
.header_tip {
  display: flex;
  justify-content: space-between;
}
.image_body {
  display: flex;
  flex-wrap: wrap;
  margin: 30px 0;
}
.body_item {
  margin: 8px;
}
.item-container img {
  width: 200px;
  height: 100px;
}
.item-container {
  position: relative;
}
.tip {
  position: absolute;
  display: flex;
  justify-content: space-around;
  padding: 5px 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(204, 204, 204, 0.5);
}
</style>